<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">List 列表</div>
    </ons-toolbar>

    <div class="content-wrapper">
        <div class="info-box">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-view-list" class="info-box-icon"></ons-icon>
                <div>
                    <div class="info-box-title">List 组件</div>
                    <div class="info-box-content">灵活的列表组件，支持多种样式和交互方式</div>
                </div>
            </div>
        </div>
        
        <!-- 性能测试按钮 -->
        <div style="margin: 20px 0; text-align: center;">
            <ons-button onclick="runListPerformanceTest()" modifier="cta">
                <ons-icon icon="md-speed"></ons-icon>
                运行列表性能测试
            </ons-button>
            <ons-button onclick="generateLargeList()" modifier="outline" style="margin-left: 10px;">
                生成大量列表项
            </ons-button>
        </div>
    </div>

    <div class="code-example-container">
        <div class="code-demo-area">
            <ons-list>
                <ons-list-header>基础列表</ons-list-header>
                <ons-list-item>列表项 1</ons-list-item>
                <ons-list-item>列表项 2</ons-list-item>
                <ons-list-item>列表项 3</ons-list-item>
            </ons-list>
        </div>
        <div class="code-actions" onclick="toggleCode('basic-list')">
            <div class="code-actions-left">
                <ons-icon id="icon-basic-list" icon="md-chevron-down"></ons-icon>
                <span>查看代码</span>
            </div>
            <div class="code-actions-right">
                <button class="code-action-btn" id="copy-btn-basic-list" onclick="event.stopPropagation(); copyCode('basic-list')">
                    <ons-icon icon="md-copy"></ons-icon>
                    <span class="btn-text">复制</span>
                </button>
            </div>
        </div>
        <div class="code-display" id="code-basic-list">
            <pre><code id="code-content-basic-list">&lt;ons-list&gt;
    &lt;ons-list-header&gt;基础列表&lt;/ons-list-header&gt;
    &lt;ons-list-item&gt;列表项 1&lt;/ons-list-item&gt;
    &lt;ons-list-item&gt;列表项 2&lt;/ons-list-item&gt;
    &lt;ons-list-item&gt;列表项 3&lt;/ons-list-item&gt;
&lt;/ons-list&gt;</code></pre>
        </div>
    </div>

    <div class="code-example-container" style="margin-top: 20px;">
        <div class="code-demo-area">
            <ons-list>
                <ons-list-header>可点击列表</ons-list-header>
                <ons-list-item tappable onclick="itemClicked('项目 A')">
                    <div class="center">项目 A</div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>
                <ons-list-item tappable onclick="itemClicked('项目 B')">
                    <div class="center">项目 B</div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>
                <ons-list-item tappable onclick="itemClicked('项目 C')">
                    <div class="center">项目 C</div>
                    <div class="right">
                        <ons-icon icon="md-chevron-right"></ons-icon>
                    </div>
                </ons-list-item>
            </ons-list>
        </div>
        <div class="code-actions" onclick="toggleCode('tappable-list')">
            <div class="code-actions-left">
                <ons-icon id="icon-tappable-list" icon="md-chevron-down"></ons-icon>
                <span>查看代码</span>
            </div>
            <div class="code-actions-right">
                <button class="code-action-btn" id="copy-btn-tappable-list" onclick="event.stopPropagation(); copyCode('tappable-list')">
                    <ons-icon icon="md-copy"></ons-icon>
                    <span class="btn-text">复制</span>
                </button>
            </div>
        </div>
        <div class="code-display" id="code-tappable-list">
            <pre><code id="code-content-tappable-list">&lt;ons-list&gt;
    &lt;ons-list-header&gt;可点击列表&lt;/ons-list-header&gt;
    &lt;ons-list-item tappable onclick="itemClicked('项目 A')"&gt;
        &lt;div class="center"&gt;项目 A&lt;/div&gt;
        &lt;div class="right"&gt;
            &lt;ons-icon icon="md-chevron-right"&gt;&lt;/ons-icon&gt;
        &lt;/div&gt;
    &lt;/ons-list-item&gt;
&lt;/ons-list&gt;

&lt;script&gt;
function itemClicked(itemName) {
    ons.notification.toast('点击了: ' + itemName, {
        timeout: 1500
    });
}
&lt;/script&gt;</code></pre>
        </div>
    </div>

    <div class="code-example-container" style="margin-top: 20px;">
        <div class="code-demo-area">
            <ons-list>
                <ons-list-header>带图标的列表</ons-list-header>
                <ons-list-item>
                    <div class="left">
                        <ons-icon icon="md-home" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">首页</div>
                </ons-list-item>
                <ons-list-item>
                    <div class="left">
                        <ons-icon icon="md-settings" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">设置</div>
                </ons-list-item>
                <ons-list-item>
                    <div class="left">
                        <ons-icon icon="md-account-circle" class="list-item__icon"></ons-icon>
                    </div>
                    <div class="center">个人中心</div>
                </ons-list-item>
            </ons-list>
        </div>
        <div class="code-actions" onclick="toggleCode('icon-list')">
            <div class="code-actions-left">
                <ons-icon id="icon-icon-list" icon="md-chevron-down"></ons-icon>
                <span>查看代码</span>
            </div>
            <div class="code-actions-right">
                <button class="code-action-btn" id="copy-btn-icon-list" onclick="event.stopPropagation(); copyCode('icon-list')">
                    <ons-icon icon="md-copy"></ons-icon>
                    <span class="btn-text">复制</span>
                </button>
            </div>
        </div>
        <div class="code-display" id="code-icon-list">
            <pre><code id="code-content-icon-list">&lt;ons-list&gt;
    &lt;ons-list-header&gt;带图标的列表&lt;/ons-list-header&gt;
    &lt;ons-list-item&gt;
        &lt;div class="left"&gt;
            &lt;ons-icon icon="md-home" class="list-item__icon"&gt;&lt;/ons-icon&gt;
        &lt;/div&gt;
        &lt;div class="center"&gt;首页&lt;/div&gt;
    &lt;/ons-list-item&gt;
    &lt;ons-list-item&gt;
        &lt;div class="left"&gt;
            &lt;ons-icon icon="md-settings" class="list-item__icon"&gt;&lt;/ons-icon&gt;
        &lt;/div&gt;
        &lt;div class="center"&gt;设置&lt;/div&gt;
    &lt;/ons-list-item&gt;
&lt;/ons-list&gt;</code></pre>
        </div>
    </div>

    <div class="code-example-container" style="margin-top: 20px;">
        <div class="code-demo-area">
            <ons-list>
                <ons-list-header>带缩略图的列表</ons-list-header>
                <ons-list-item>
                    <div class="left">
                        <div style="width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center;">
                            <ons-icon icon="md-image" style="color: white; font-size: 24px;"></ons-icon>
                        </div>
                    </div>
                    <div class="center">
                        <span class="list-item__title">标题 1</span>
                        <span class="list-item__subtitle">副标题描述</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="left">
                        <div style="width: 40px; height: 40px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center;">
                            <ons-icon icon="md-image" style="color: white; font-size: 24px;"></ons-icon>
                        </div>
                    </div>
                    <div class="center">
                        <span class="list-item__title">标题 2</span>
                        <span class="list-item__subtitle">副标题描述</span>
                    </div>
                </ons-list-item>
            </ons-list>
        </div>
        <div class="code-actions" onclick="toggleCode('thumbnail-list')">
            <div class="code-actions-left">
                <ons-icon id="icon-thumbnail-list" icon="md-chevron-down"></ons-icon>
                <span>查看代码</span>
            </div>
            <div class="code-actions-right">
                <button class="code-action-btn" id="copy-btn-thumbnail-list" onclick="event.stopPropagation(); copyCode('thumbnail-list')">
                    <ons-icon icon="md-copy"></ons-icon>
                    <span class="btn-text">复制</span>
                </button>
            </div>
        </div>
        <div class="code-display" id="code-thumbnail-list">
            <pre><code id="code-content-thumbnail-list">&lt;ons-list&gt;
    &lt;ons-list-header&gt;带缩略图的列表&lt;/ons-list-header&gt;
    &lt;ons-list-item&gt;
        &lt;div class="left"&gt;
            &lt;div style="width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center;"&gt;
                &lt;ons-icon icon="md-image" style="color: white; font-size: 24px;"&gt;&lt;/ons-icon&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="center"&gt;
            &lt;span class="list-item__title"&gt;标题 1&lt;/span&gt;
            &lt;span class="list-item__subtitle"&gt;副标题描述&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ons-list-item&gt;
&lt;/ons-list&gt;</code></pre>
        </div>
    </div>

    <div class="code-example-container" style="margin-top: 20px;">
        <div class="code-demo-area">
            <ons-list>
                <ons-list-header>可展开列表</ons-list-header>
                <ons-list-item expandable>
                    <div class="center">展开查看更多</div>
                    <div class="expandable-content">
                        这是展开后的内容。可以放置任何 HTML 元素。
                    </div>
                </ons-list-item>
                <ons-list-item expandable>
                    <div class="center">另一个可展开项</div>
                    <div class="expandable-content">
                        展开内容 2
                    </div>
                </ons-list-item>
            </ons-list>
        </div>
        <div class="code-actions" onclick="toggleCode('expandable-list')">
            <div class="code-actions-left">
                <ons-icon id="icon-expandable-list" icon="md-chevron-down"></ons-icon>
                <span>查看代码</span>
            </div>
            <div class="code-actions-right">
                <button class="code-action-btn" id="copy-btn-expandable-list" onclick="event.stopPropagation(); copyCode('expandable-list')">
                    <ons-icon icon="md-copy"></ons-icon>
                    <span class="btn-text">复制</span>
                </button>
            </div>
        </div>
        <div class="code-display" id="code-expandable-list">
            <pre><code id="code-content-expandable-list">&lt;ons-list&gt;
    &lt;ons-list-header&gt;可展开列表&lt;/ons-list-header&gt;
    &lt;ons-list-item expandable&gt;
        &lt;div class="center"&gt;展开查看更多&lt;/div&gt;
        &lt;div class="expandable-content"&gt;
            这是展开后的内容。可以放置任何 HTML 元素。
        &lt;/div&gt;
    &lt;/ons-list-item&gt;
    &lt;ons-list-item expandable&gt;
        &lt;div class="center"&gt;另一个可展开项&lt;/div&gt;
        &lt;div class="expandable-content"&gt;
            展开内容 2
        &lt;/div&gt;
    &lt;/ons-list-item&gt;
&lt;/ons-list&gt;</code></pre>
        </div>
    </div>

    <script src="../js/code-display.js"></script>
    <script>
        function itemClicked(itemName) {
            ons.notification.toast('点击了: ' + itemName, {
                timeout: 1500
            });
        }
        
        // 运行列表性能测试
        function runListPerformanceTest() {
            if (typeof createPerformanceTestSuite === 'function') {
                const performanceTest = createPerformanceTestSuite();
                performanceTest.runAllTests();
                
                ons.notification.toast('性能测试已开始，请查看控制台输出', {
                    timeout: 3000
                });
            } else {
                ons.notification.toast('性能测试功能未加载', {
                    timeout: 2000
                });
            }
        }
        
        // 生成大量列表项进行性能测试
        function generateLargeList() {
            const startTime = performance.now();
            
            // 创建测试数据
            const testData = Array.from({length: 1000}, (_, i) => ({
                title: `性能测试项目 ${i + 1}`,
                subtitle: `这是第 ${i + 1} 个测试项目的描述信息`
            }));
            
            // 找到第一个列表容器
            const listContainer = document.querySelector('.code-demo-area');
            if (listContainer) {
                // 清空现有内容
                listContainer.innerHTML = '';
                
                // 使用优化的列表更新函数
                if (typeof updateOnsenUIList === 'function') {
                    // 创建一个临时容器
                    const tempDiv = document.createElement('div');
                    tempDiv.id = 'performance-test-list';
                    listContainer.appendChild(tempDiv);
                    
                    // 使用优化函数更新列表
                    updateOnsenUIList('performance-test-list', testData);
                } else {
                    // 降级到普通方法
                    const list = document.createElement('ons-list');
                    const header = document.createElement('ons-list-header');
                    header.textContent = `性能测试列表 (${testData.length} 项)`;
                    list.appendChild(header);
                    
                    testData.forEach((item, index) => {
                        const listItem = document.createElement('ons-list-item');
                        listItem.setAttribute('tappable', '');
                        listItem.innerHTML = `
                            <div class="left">
                                <ons-icon icon="md-account-circle"></ons-icon>
                            </div>
                            <div class="center">
                                <div>${item.title}</div>
                                <div style="color: #999; font-size: 14px;">${item.subtitle}</div>
                            </div>
                            <div class="right">
                                <ons-icon icon="md-chevron-right"></ons-icon>
                            </div>
                        `;
                        
                        listItem.addEventListener('click', () => {
                            itemClicked(item.title);
                        });
                        
                        list.appendChild(listItem);
                    });
                    
                    listContainer.appendChild(list);
                }
                
                const endTime = performance.now();
                const renderTime = endTime - startTime;
                
                ons.notification.toast(`生成 ${testData.length} 个列表项，耗时: ${renderTime.toFixed(2)}ms`, {
                    timeout: 3000
                });
                
                console.log(`大量列表渲染完成，耗时: ${renderTime.toFixed(2)}ms`);
            }
        }
    </script>
</ons-page>
